<template>
  <div class="login-container">
    <h2 class="login-title">
      MineCosmos 综合站点
    </h2>
    <v-form ref="formContainer" class="login-form" style="width: 300px;">
      <v-text-field color="pink" prepend-icon="mdi-account" v-model="formData.username" :counter="10"
        :rules="fromDataRules.usernameRules" label="用户名" required></v-text-field>
      <v-text-field color="pink" prepend-icon="mdi-lock" v-model="formData.password" :rules="fromDataRules.passwordRules"
        label="密码" required></v-text-field>


      <div class="login-button-group">
        <v-btn @click="sureLogin" :loading="loading" size="large">登录</v-btn>
        <v-btn @click="register" size="large">注册</v-btn>
      </div>

      <div class="login-type-container">
        <v-icon :icon="item.icon" v-for="item in supportLoginTypes" :key="item.type"
          @click="changeLoginType(item.type)"></v-icon>
      </div>

    </v-form>
  </div>
</template>

<script setup lang="ts">
import { supportLoginTypes } from './components/login-type'
import { useUserStore } from '@/store/modules/user'
import { passwordLoginValid as fromDataRules } from './components/login-valid'
import { VForm as FormType } from 'vuetify/lib/components/VForm/index'


type LoginType = string | number | undefined


const router = useRouter()
const userStore = useUserStore()
const formContainer = ref(null)
const loginType = ref<LoginType>(0)
const loading = ref(false)
const formData = reactive({ username: 'admin', password: 'admins' })


/**
 *
 * @param t 登录类型
 */
const changeLoginType = (t: LoginType) => {
  loginType.value = t
  const item = supportLoginTypes.find(item => item.type == t)
  if (item) {
    alert('当前选择登录方式=>' + item.title)
  } else {
    alert('不支持该方式登录！')
  }

}


/**
 * 登录
 */
const sureLogin = async () => {
  if (!formContainer.value) {
    alert('获取不到 formContainer ')
    return;
  }
  const form = formContainer.value as FormType
  let result = await form.validate()
  if (result.valid) {
    loading.value = true
    userStore.login(formData.username, formData.password).then(res => {
      router.push('/home')
    }).catch(error => {
      console.log("登录失败", error)
    }).finally(() => {
      loading.value = false
    })
  }
}


/**
 * 注册
 */
const register = () => {
  alert('该功能还不支持！')
}


</script>


<style lang="scss" scoped>
.login-container {
  background-image: linear-gradient(to right top, #3e3c96, #3e3b96, #3e3996, #3e3895, #3e3695, #3e3595, #3f3396, #3f3296, #3f3197, #402f97, #402e98, #412c98);
  // background-image: url('https://cdn.jsdelivr.net/gh/wuxin0011/blog-resource@main/fantasy/screen.png');
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  font-weight: normal;

  // &:before {
  //     content: '';
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     bottom: 0;
  //     right: 0;
  //     background-color: rgba(255, 255, 255, 0.2);
  //     backdrop-filter: blur(5px);
  // }

  .login-title {
    padding-bottom: 20px;
    font-weight: normal;
  }

  .login-form {
    width: 20%;

    .login-btn-group {
      display: flex;
      justify-content: space-around;
      color: #fff !important;
    }


    .login-button-group {
      text-align: center;

      :deep(button) {
        margin: 10px;
      }
    }


    .login-type-container {
      display: flex;
      justify-content: space-between;
      transition: all ease-in-out 1.5s;

      .login-type-item {
        cursor: pointer;
        display: inline;
        padding: 10px;
        background-color: teal;

        &:hover {
          transform: scale(1.2);
        }
      }
    }

  }

}
</style>
